<template>
	<view class="cardbody">
		<u-navbar back-text="优惠券" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<mescroll-body top="0" :down="downOption" :up="upOption" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
		<view style="width: 92%;margin: auto;padding-top: 20rpx;">
			
				<view class="card_bj" style="position: relative;" v-for="(int, index) in lists" :key="index">
					<view class="card_bj" style="position: relative;" @click="lingqu(int)">
						<image style="height:176rpx ;width: 100%;" :src="backImg.gimg"></image>
						<view style="position: absolute;left: 0;top: 0;width: 100%;">
							<view style="width: 100%;margin: auto;overflow: hidden;">
								<!-- 满减卷 -->
								<view style="width:30% ;float: left;text-align: center;" v-if="int.counponsType == 0"> 
									<view style="font-size:56rpx ;font-weight: bold;color: #fff;padding-top: 28rpx;">
										<text style="font-size: 28rpx;">￥</text>
										{{ int.price }}
									</view>
									<view style="font-size:24rpx ;color: #fff;line-height: 48rpx;">满{{ int.limitation }}元可用</view>
								</view>
								<!-- 折扣卷 -->
								<view style="width:30% ;float: left;text-align: center;" v-else>
									<view style="font-size:56rpx ;font-weight: bold;color: #fff;padding-top: 28rpx;">								
										{{int.fmtDiscountStr}}
									</view>
									<view style="font-size:24rpx ;color: #fff;line-height: 48rpx;">无门槛使用</view>
								</view>
								<!-- 已领取 -->
								<view style="width: 70%;float: right;">
									<view style="width: 93%;margin: auto;display: flex;">
										<view style="width: 90%;">
											<view class="card_text" style="color: #333333;font-weight: bold; font-size:30rpx ;color: #3F3F3F;padding: 36rpx 10rpx 12rpx 20rpx;">{{int.fmtName}}</view>
											<view class="card_text"
											:style="{ 'line-height': int.limitType!== 1 && int.limitType !== 3 ? '86rpx' : '48rpx' }"
											style="color: #6F6F6F; font-size:22rpx ;color: #3F3F3F;padding: 0rpx 0rpx 0rpx 20rpx;">
												有效期至{{ int.endDatetime }}
											</view>
											<view class="card_text" style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #979797;font-size: 20rpx;line-height: 34rpx;">
												{{int.activityType == 1 || int.activityType == 3 ? '#仅限'+ int.activityName+'活动商家使用#':''}}
											</view>	
										</view>
										<view style="color: #FF7D55; text-align: center;width: 5%;margin-top: 30rpx;">去<br />使<br />用</view>
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
		
			<view style="margin-top: 50rpx;">
				<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{prompt}}</u-divider>
			</view>
		</view>
			</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			backImg: {
				gimg: 'https://beedao.oss-cn-beijing.aliyuncs.com/aea18911a6d14cd3adf753ceb261a190.png',
				img: 'https://beedao.oss-cn-beijing.aliyuncs.com/d966eed886cc43a38845e04af918d0f8.png'
			},//领取优惠卷背景图
			id:'',
			orderStatus:'',
			
			textStyle: {
				color: '#272755'
			},
			downOption: {
				use: true,
				auto: true,
				offset: 40
			},
			upOption: {
				use: false
			},
			mescroll: null,
			prompt: '没有更多了',
			page: 1,
			lists:[],
			cards: [
				{
					name: '',
					num: [],
					id: 1
				},
				{
					name: '',
					num: [],
					id: 2
				}
			],
			type:'',
			result:'',
			month:''
		};
	},
	onLoad(option) {
		that = this;
		that.id=option.id;
		that.type=option.type;
		
		that.month=option.month;
		that.result=option.result;
		
		
		console.log(that.type,"续约接收1")
		console.log(that.lists,"续约的优惠券信息")
		that.orderStatus=option.orderStatus;
		if(that.type==1){
			that.abc=JSON.parse(option.abc);
			that.lists = that.abc
		}else{
			that.getOrderDetail();
		}
		
	},
	onShow() {},

	onReachBottom() {
		// that.page += 1;
		// that.cards_list(0);
		// that.cards_list(1);
	},
	methods: {
		//商品信息
		getOrderDetail() {
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/info'
			};
			let data = {
				orderId: that.id
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				that.lists = res.data.couponsList
				console.log(that.lists,"优惠券列表")
			})
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新回调函数
		downCallback() {
		
			setTimeout(() => {
				
				this.prompt = '没有更多数据了....';
				
				this.mescroll.endSuccess();
			}, 500)
		},
		// 领取商家优惠券
		lingqu(quan_id) {
			if(this.type){
				// uni.redirectTo({
				// 	url:'/pageageA/order/sign?quan_id='+quan_id+'&orderId='+that.id+'&orderStatus='+that.orderStatus+'&month='+that.month+'&result='+that.result
				// })
				console.log(quan_id)
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				prevPage.$vm.quanid = quan_id;  
				prevPage.$vm.month = this.month; 
				prevPage.$vm.result = this.result;  
				prevPage.$vm.orderId = this.id;  
				uni.navigateBack({
					delta:1
				})
			}else{
				uni.redirectTo({
					url:'/pageageA/order/orderDetail?quan_id='+quan_id+'&orderId='+that.id+'&orderStatus='+that.orderStatus
				})
			}
		},
	
	}

};
</script>

<style>
.cardbody {
	width: 100%;
	margin: auto;
}
.card_bj {
	width: 100%;
	margin: auto;
	height: 176rpx;
	margin-bottom: 40rpx;
}
.card_bj img {
	width: 100%;
	height: 100%;
}
.card_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #272755;
	font-size: 30rpx;
	padding: 0rpx 0rpx 25rpx 0rpx;
	font-weight: bold;
}
.card_text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #979797;
	font-size: 20rpx;
	line-height: 35rpx;
}
.car_but {
	text-align: center;
	line-height: 48rpx;
	width: 134rpx;
	height: 48rpx;
	position: absolute;
	bottom: 50rpx;
	right: 20rpx;
	border-radius: 32rpx;
	font-size: 30rpx;
	color: white;
	background: linear-gradient(139deg, #ffa63b 0%, #ff6600 100%);
	box-shadow: 0px 5px 5px rgba(255, 168, 37, 0.39);
}

</style>
